<template>
  <div class="home">
    <add @add="add"></add>
    <list :list="list" @remove="remove" @change="change"></list>
  </div>
</template>

<script>
import add from "../components/Add";
import list from "../components/List";
export default {
  data() {
    return {
      list: [
        {
          title: "任务一吃饭",
          status: false,
        },
        {
          title: "任务二睡觉",
          status: false,
        },
        {
          title: "任务三敲代码",
          status: true,
        },
      ],
    };
  },
  mounted() {
    if (localStorage.getItem("list")) {
      this.list = JSON.parse(localStorage.getItem("list"));
    }
  },
  //进入页面如果本地存储中有数据 就从本地存储中拿数据
  components: {
    add,
    list,
  },
  //注册子组件
  methods: {
    add(val) {
      this.list.push({ title: val, status: false });
    },
    //向 list中添加数据 传到add子组件使用
    remove(index) {
      this.list.splice(index, 1);
    },
    //删除 在list子组件使用
    change(index) {
      this.list[index].status = !this.list[index].status;
    },
    // 修改状态，传到list子组件使用
  },
  watch: {
    list: {
      handler(newval) {
        localStorage.setItem("list", JSON.stringify(newval));
      },
      deep: true,
    },
    //监听list的改变 存在本地存储中
  },
};
</script>
